<template>
	<view class="pageBox">
		<view class="topBG"></view>
		<view class="myBox-topBox">
			<view class="navBox">
				<uni-nav-bar height="88rpx" fixed title="积分商城" left-icon="left" @clickLeft="$back()" color="#fff"
					:border="false" statusBar backgroundColor="linear-gradient(90deg, #6FA9FF 100%, #6FA9FF 81%)">
				</uni-nav-bar>
			</view>
			<view class="contentBox">
				<view class="availableBox">
					<view class="title">可用积分</view>
					<view class="availableNum">{{userInfo.integral||0}}</view>
					<view class="bottomBtnList">
						<view class="availableBtn" @click="goto('common/integral/integralRecord/integralRecord')">
							积分明细</view>
						<view class="availableBtn" @click="goto('common/integral/exchangeRecord/exchangeRecord')">
							兑换记录</view>
					</view>
				</view>
			</view>
			<view class="popularityGoods">
				<view class="dividerBox">
					<u-divider text="人气推荐"></u-divider>
				</view>
				<view class="goodsBox">
					<view class="goodsItem" v-for="(item,index) in dataList.rows" :key="index"
						@click.stop="goto('integral/goodsInfo/goodsInfo',{id:item.commodityId})">
						<image class="goodsImg" :src="$setImgUrl(item.commodityFile)" mode="scaleToFill"></image>
						<view class="goodsName">{{item.commodityName}}</view>
						<view class="goodsBottom">
							<view class="goodsIntegral">{{item.integral}}积分</view>
							<view class="exchangeNumber">已换{{item.exchange}}份</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <tabBar selectedIndex="3"></tabBar> -->
		<u-modal :show="rzShow" title="提示" content="请先提交认证申请成为人才!" confirmText="去提交" showCancelButton cancelText="取消"
			@confirm="toRZ" @close="RZX" @cancel="RZX"></u-modal>
		<!-- <myTabBar nowIndex="my/my"></myTabBar> -->
	</view>
</template>

<script>
	import {
		mostRedeemedCommodities
	} from "@/api/goods"
	export default {
		data() {
			return {
				rzShow: false,
				userInfo: {
					userName: '',
					userType: '',
					roles: [{
						roleName: '',
						roleId: '',
						roleKey: ''
					}],
					avatar: '',
					nickName: '',
					sex: 2
				},
				indexData: [],
				dataList: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					rows: []
				},
				pageNumMax: 1,
				navBG: 'transparent',
			};
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			//⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
			this.userInfo = this.$store.getters.my_userInfo
			if (!this.userInfo) {
				this.$store.dispatch('userBaseInfo').then(res => {
					this.userInfo = res.user
					this.eliteInfo = res.eliteInfo
				})
			}
		},
		methods: {
			toRZ() {
				uni.$u.debounce(() => {
					this.$navTo(`pages/common/authentication/authentication`)
					this.rzShow = false
				}, 500)
			},
			RZX() {
				this.rzShow = false
			},

			goto(url, data) {
				if (this.userInfo.userType == 'yk') {
					this.rzShow = true
				} else {
					this.$navTo(`pages/${url}`, data)
				}
			},
			getData(pageNum = 1, pageSize = 10) {
				const page = {
					pageNum,
					pageSize,
				}
				mostRedeemedCommodities(page).then(res => {
					let list = []
					this.dataList.pageNum = pageNum
					this.dataList.pageSize = pageSize
					this.dataList.total = res.total
					this.pageNumMax = Math.ceil(res.total / 10)
					if (pageNum == 1) {
						this.dataList.rows = []
					}
					list = list.concat(res.rows)
					this.dataList.rows = list
					console.log(this.pageNumMax, res.rows, list);
				})
			},
		},
		onReachBottom() {
			const dataList = this.dataList
			let page = {
				pageNum: dataList.pageNum,
				pageSize: dataList.pageSize,
				total: dataList.total,
			}
			const pageNumMax = this.pageNumMax
			if (page.pageNum < this.pageNumMax) {
				page.pageNum++
				this.getRoomList(page.pageNum, page.pageSize)
			}
			console.log('到底');
		}
		// onPageScroll({
		// 	scrollTop
		// }) {
		// 	if (scrollTop > 10) {
		// 		this.navBG = "linear-gradient(90deg, #6FA9FF 100%, #6FA9FF 81%)"
		// 	} else {
		// 		this.navBG = "transparent"
		// 	}
		// }
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/integral/integralScss.scss";
	@import "@/pages/common/integral/todayGoods/todayGoods.scss";

	page {
		background-color: #F4F4F4;
	}

	.dividerBox {
		padding: 0 10%;
		margin: auto;
		margin-bottom: 30rpx;
	}

	.popularityGoods {
		padding: 30rpx;
	}
</style>